<!--
    This page contains the form "Floor"
    with a Javascript method that can enable the year of renovation.
-->

<script type="text/javascript">
    function visibleFloor(){
        if(document.getElementById('changedFloor').checked){
            document.getElementById('yearChangedFloor').removeAttribute('readonly');
            document.getElementById('changedCheckedFloor').style.color="black";
        }
        else{
            document.getElementById('yearChangedFloor').setAttribute('readonly', 'readonly');
            document.getElementById('changedCheckedFloor').style.color="grey";
        }    
        displayCeilingFloor();
    }
    
    function modifyAreaFloor(){
        var modif = document.getElementById("modifAreaFloor");

        if(modif.checked){
            document.getElementById('floorAreaId').removeAttribute('readonly');
        }
        else{
            document.getElementById('floorAreaId').setAttribute('readonly', 'readonly');
        }
        
        displayCeilingFloor();
    }
</script>
<p id="subtitle"><?php echo TXT_SUBMENU_FLOOR; ?> <img id="tooltip" src="../images/help.png" title="<?php echo TXT_HELP_FLOOR; ?>" /></p>
<div style="background-color: #f2f2f2; margin : 10px; padding : 20px; border-radius: 10px; Box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.4);">
<div>
    
   <img src="../images/forms/floor/floorBasement2.png" id="floorPicture" />
</div>

<table id="floorTable">
    <tr>
        <th style="text-align: left;  vertical-align: top;">
            <br>
            <?php echo TXT_AREA; ?>
        </th>
        <td>
            <br>
            <input type="number" name="floorArea" id="floorAreaId" readonly="true" /> m²  <input id="modifAreaFloor" type="checkbox" onclick="modifyAreaFloor();"/><?php echo TXT_DIMENSION_EDIT; ?>
        </td>
    </tr>
    <tr>
        <th style="text-align: left;  vertical-align: top;">
            <br>
            <?php echo TXT_CHANGED_FLOOR; ?>
            <input type="checkbox" id="changedFloor" name="changedFloor" onclick="visibleFloor()" />
        </th>
        <td>
            <br>
            <span id="changedCheckedFloor"><?php echo TXT_CHANGED_YEAR; ?></span>
            <input type="date" id="yearChangedFloor" name="yearChangedFloor" readonly />
        </td>
    </tr>
</table>
</div>
